<template>
  <div class="content">
    <div class="title">订单详情</div>
    <div class="type">
      <div class="typeText">
        <img :src="info.typeImg" width="35" height="35" alt="" />
        <div class="txt">{{ info.typeTxt }}</div>
      </div>
      <div class="num">
        订单编号：<span>{{ info.details.number }}</span>
      </div>
    </div>
    <div class="seller">
      <img src="@/assets/image/car.png" width="45" height="32" alt="" />
      <div class="sellerInfo">
        <span
          ><span
            style="font-weight: bold; color: var(--textColor); font-size: 16px"
            >{{ info.details.name }}</span
          >
          &nbsp;&nbsp;{{ info.details.phone }}</span
        >
        <span>银行卡号：&nbsp; {{ info.details.card }}</span>
      </div>
    </div>
    <div class="border"></div>
    <div class="orderInfo">
      <img
        :src="imgUrl + info.details.productListImg"
        width="100"
        height="100"
        alt=""
      />
      <div class="infoText">
        <div class="orderTitle" style="color: var(--textColor)">
          {{ info.details.productName }}
        </div>
        <div class="orderNumber">
          商品编号：<span style="color: var(--textColor)">{{
            info.details.productNumber
          }}</span>
        </div>
        <div class="orderTime">
          抢购时间：<span style="color: var(--textColor)">{{
            info.details.updateTime
          }}</span>
        </div>
      </div>
    </div>
    <div class="border"></div>
    <div class="money">
      <span style="letter-spacing: 1px">商品总价</span>
      <span class="number"
        >￥ <span>{{ info.details.price }}</span></span
      >
    </div>
    <div class="buttonView">
      <div
        class="button1"
        v-if="info.details.orderStatus == '0'"
        @click="submit"
      >
        {{ info.buttonText }}
      </div>
      <div
        class="button2"
        v-if="info.details.orderStatus == '1'"
        @click="submit"
      >
        {{ info.buttonText }}
      </div>
      <div
        class="button3"
        v-if="info.details.orderStatus == '2'"
        @click="submit"
      >
        {{ info.buttonText }}
      </div>
    </div>
  </div>

  <teleport to="body" v-if="imgBool">
    <div class="telBody">
      <img :src="info.details.payCert" alt="" />
      <div class="buttonTel" @click="telSue">确定</div>
    </div>
  </teleport>

  <van-popup
    v-model:show="show"
    @click-overlay="clickOverlay"
    style="width: 80%; background-color: var(--backColor)"
  >
    <Popup
      :money="info.details.price"
      :myId="info.details.id"
      :Id="Id"
      :productId="info.details.productId"
      @onRmove="onRmove"
    />
  </van-popup>
</template>

<script>
import { defineComponent, onMounted, reactive, ref, provide } from "vue";
import { getBuyDetail, imgUrl } from "@/api/http.js";
import { useRoute } from "vue-router";
import succeed from "@/assets/image/succeed.png";
import user from "@/assets/image/user.png";
import wait from "@/assets/image/wait.png";
import Popup from "@/components/Popup.vue";

export default defineComponent({
  setup() {
    const route = useRoute();
    console.log("route---", route);

    const getInfo = async () => {
      const data = await getBuyDetail({ id: route.query.orderId });
      info.details = data.data;
      orderType(info.details.orderStatus);
      console.log("获取信息---", data);
    };

    onMounted(() => {
      getInfo();
    });

    const info = reactive({
      details: {},
      typeTxt: "",
      typeImg: "",
      buttonText: "",
      type: 0,
    });

    const orderType = (type) => {
      let imgUrl;
      let text;
      let buttonText;
      switch (Number(type)) {
        case 0:
          imgUrl = wait;
          text = "等待买家付款";
          buttonText = "立即支付";
          break;

        case 1:
          imgUrl = user;
          text = "管理员审核中，请耐心等待…";
          buttonText = "查看凭证";
          break;

        case 2:
          imgUrl = succeed;
          text = "订单支付成功";
          buttonText = "上架商品";
          break;

        default:
          break;
      }
      info.typeImg = imgUrl;
      info.typeTxt = text;
      info.buttonText = buttonText;
    };

    const submit = () => {
      switch (Number(info.details.orderStatus)) {
        case 0:
          payment();
          break;

        case 1:
          see();
          break;

        case 2:
          upShelves();
          break;

        default:
          break;
      }
    };
    const Id = ref("");
    const show = ref(false);
    const payment = () => {
      Id.value = info.details.productId;
      show.value = true;
      console.log("支付");
    };
    const onRmove = () => {
      console.log("取消");
      getInfo();
      show.value = false;
    };
    const overlayBool = ref(false);
    provide("overlay", overlayBool);
    const clickOverlay = () => {
      overlayBool.value = true;
    };

    const imgBool = ref(false);
    const see = () => {
      imgBool.value = true;
      console.log("查看");
    };
    const telSue = () => {
      imgBool.value = false;
    };

    const upShelves = () => {
      console.log("上架");
    };

    return {
      route,
      info,
      orderType,
      submit,
      onRmove,
      clickOverlay,
      show,
      imgBool,
      telSue,
      imgUrl,
      Id,
    };
  },
  components: {
    Popup,
  },
});
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  min-height: 100vh;
  background-color: var(--backColorTwo);

  .title {
    width: 100%;
    height: 60px;
    background: #d8b88c;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 60px;
    text-align: center;
    letter-spacing: 1px;
  }

  .type {
    margin-top: -1px;
    width: 100%;
    height: 130px;
    padding: 0 4%;
    background: #d8b88c;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    .typeText {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: 1px;

      .txt {
        margin-left: 10px;
      }
    }

    .num {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 15px;
      margin-bottom: 20px;
    }
  }

  .seller {
    width: 100%;
    padding: 0 4%;
    height: 90px;
    background-color: var(--backColor);
    color: var(--textColorTwo);
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .sellerInfo {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      font-size: 13px;
      font-family: PingFang SC;

      & > span:nth-child(2) {
        margin-top: 10px;
      }
    }
  }

  .border {
    width: 100%;
    height: 5px;
    background-color: var(--backColorTwo);
  }

  .orderInfo {
    width: 100%;
    background-color: var(--backColor);
    padding: 12px 4%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .infoText {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      color: var(--textColorTwo);
      margin-left: 20px;

      div {
        margin-top: 10px;
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 400;
      }

      .orderTitle {
        margin-top: 5px;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 18px;
        line-height: 25px;
        font-family: PingFang SC;
        font-weight: 400;
        letter-spacing: 1px;
      }
    }
  }

  .money {
    width: 100%;
    height: 80px;
    padding: 0 4%;
    background-color: var(--backColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--textColor);

    .number {
      color: #df0000;
      font-size: 10px;

      span {
        margin-left: 10px;
        font-size: 20px;
      }
    }
  }

  .buttonView {
    width: 100%;
    height: 60px;
    background-color: var(--backColor);
    padding: 0 4%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    div {
      border-radius: 20px;
      width: 150px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 18px;
      letter-spacing: 1px;
      font-weight: 400;
    }

    .button1 {
      background-color: #df0000;
      color: #fff;
    }
    .button2 {
      background-color: #e5e5e5;
      color: #666666;
    }
    .button3 {
      background-color: #d8b88c;
      color: #fff;
    }
  }
}
.telBody {
  width: 80%;
  border-radius: 20px;
  background-color: var(--backColor);
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px 4%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
  }

  .buttonTel {
    margin-top: 20px;
    border-radius: 20px;
    width: 150px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    letter-spacing: 4px;
    font-weight: 400;
    background-color: var(--textColor);
    color: var(--backColor);
  }
}
</style>
